<template>
	<div class="shopcar-container">

		<div class="goods-list">

			<!--商品列表项目区域-->
			<div class="mui-card" v-for="(item,i) in goodsList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getGoodsSelected[item.id]"></mt-switch>
						<img :src="item.thumb_path"
							 alt="">
						<div class="info">
							<h1>{{item.title}}</h1>
							<p>
								<span class="price">¥{{item.sell_price}}</span>
								<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
								<a href="#" @click.prevent="remove(item.id,i)">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>

			<!--结算区域-->
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
							<p>总计（不含运费）</p>
							<p>已勾选商品 <span class="red">{{ $store.getters.getGoodsCountAndAmount.count }}</span> 件，总价
								<span class="red">¥{{ $store.getters.getGoodsCountAndAmount.amount }}</span></p>
						</div>
						<mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>

		</div>

		{{$store.getters.getGoodsSelected}}

	</div>
</template>

<script>

    import numbox from "../subcomponents/shopcar_numbox";

    export default {
        name: "HomeContainer",
        data() {
            return {
                goodsList: [], // 购物车中所有的商品数据
            }
        },
        created() {
            this.getGoodslist();
        },
        methods: {
            getGoodslist() { // 获取购物车商品列表

                // 获取到store中所有商品的id，然后拼接出一个用逗号分隔的字符串
                var idArr = [];
                this.$store.state.car.forEach(item => idArr.push(item.id));

                // 如果购物车中没有商品，则直接返回，不需要请求接口，否则会报错
                if (idArr.length <= 0) {
                    return;
                }

                this.$http.get('api/goods/getshopcarlist/' + idArr.join(",")).then(result => {
                    if (result.body.status === 0) {
                        this.goodsList = result.body.message;
                    }
                })
            },
            remove(id, index) { // 几点删除，把商品从 store 中根据传递的 ID 删除，同时，把当前组件中goodslist中，对应要删除的那个上屏，使用index来删除
                this.goodsList.splice(index, 1);
                this.$store.commit('removeFormCar', id);
            }
        },
        components: {
            numbox
        }
    }
</script>

<style lang="less" scoped>
	.shopcar-container {
		background-color: #eeeeee;
		overflow: hidden;

		.goods-list {

			.mui-card-content-inner {
				display: flex;
				align-items: center;
			}

			img {
				width: 60px;
				height: 60px;
			}

			h1 {
				font-size: 13px;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					color: red;
					font-weight: bold;
				}
			}

		}

		.jiesuan {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.red {
				color: red;
				font-weight: bold;
				font-size: 16px;
			}
		}
	}
</style>